<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<meta name="description" content="Everest Admin Panel" />
		<meta name="keywords" content="Admin, Dashboard, Bootstrap3, Sass, transform, CSS3, HTML5, Web design, UI Design, Responsive Dashboard, Responsive Admin, Admin Theme, Best Admin UI, Bootstrap Theme, Wrapbootstrap, Bootstrap" />
		<meta name="author" content="Bootstrap Gallery" />
		<link rel="shortcut icon" href="img/favicon.ico">
		<title>sugonTravle</title>
		
		<!-- Bootstrap CSS -->
		<link href="css/bootstrap.css" rel="stylesheet" media="screen">

		<!-- Animate CSS -->
		<link href="css/animate.css" rel="stylesheet" media="screen">

		<!-- Alertify CSS -->
		<link href="css/alertify/alertify.core.css" rel="stylesheet">
		<link href="css/alertify/alertify.default.css" rel="stylesheet">

		<!-- Main CSS -->
		<link href="css/main.css" rel="stylesheet" media="screen">


		<!-- Font Awesome -->
		<link href="fonts/font-awesome.min.css" rel="stylesheet">
		
		<link href="css/jquery.dataTables.min.css" rel="stylesheet">

		<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
			<script src="js/html5shiv.js"></script>
			<script src="js/respond.min.js"></script>
		<![endif]-->
		<style>
			#citys, #selected_citys{
				/*display: none;*/
				display:none;
				position: absolute;
				z-index: 999;
				width: 325.06px;
				
			}
			/*.city-box{
				height: 55px;
			}*/
			/*
			 设置列表行选中之后不可见
			 * */
			.hide{
				visibility:hidden;
			}
		</style>
		
		<style>
            .table>tbody>tr>td{
                text-align:center;
            }
            .table>thead>tr>th{
                text-align:center;
            }
        </style>
		

	</head>  

	<body>

		<!-- Header Start -->
		<header>

			<!-- Logo starts -->
			<div class="logo">
				<a href="#">
					<img src="img/logo.png" alt="logo">
					<span class="menu-toggle hidden-xs">
						<i class="fa fa-bars"></i>
					</span>
				</a>
			</div>
			<!-- Logo ends -->

			<!-- Custom Search Starts -->
			<div class="custom-search pull-left hidden-xs hidden-sm">
				<input type="text" class="search-query" placeholder="Search here">
				<i class="fa fa-search"></i>
			</div>
			<!-- Custom Search Ends -->

			<!-- Mini right nav starts -->
			<div class="pull-right">
				<ul id="mini-nav" class="clearfix">
					<li class="list-box hidden-lg hidden-md hidden-sm" id="mob-nav">
						<a href="#">
							<i class="fa fa-reorder"></i>
						</a>
					</li>
					<li class="list-box dropdown hidden-xs">
						<a id="drop7" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-image"></i>
						</a>
						<span class="info-label info-bg animated rubberBand">7+</span>
						<ul class="blog-gallery dropdown-menu fadeInDown animated clearfix recent-tweets">
							<li>
								<img src="img/user1.jpg" alt="User">
							</li>
							<li>
								<img src="img/user2.jpg" alt="User">
							</li>
							<li>
								<img src="img/user3.jpg" alt="User">
							</li>
							<li>
								<img src="img/user4.jpg" alt="User">
							</li>
							<li>
								<img src="img/user5.jpg" alt="User">
							</li>
							<li>
								<img src="img/user6.jpg" alt="User">
							</li>
							<li>
								<img src="img/user7.jpg" alt="User">
							</li>
							<li>
								<img src="img/user8.jpg" alt="User">
							</li>
							<li>
								<img src="img/user9.jpg" alt="User">
							</li>
							<li>
								<img src="img/user3.jpg" alt="User">
							</li>
						</ul>
					</li>
					<li class="list-box dropdown hidden-xs">
						<a id="drop5" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-th"></i>
						</a>
						<span class="info-label success-bg animated rubberBand">6</span>
						<ul class="dropdown-menu fadeInDown animated quick-actions">
							<li class="plain">Recently Viewed</li>
							<li>
								<a href="profile.html">
									<i class="fa fa-user text-info"></i>
									<p>Users</p>
								</a>
							</li>
							<li>
								<a href="login.html">
									<i class="fa fa-tasks text-warning"></i>
									<p>Tasks</p>
								</a>
							</li>
							<li>
								<a href="typography.html">
									<i class="fa fa-font text-danger"></i>
									<p>Fonts</p>
								</a>
							</li>
							<li>
								<a href="graphs.html">
									<i class="fa fa-globe text-success"></i>
									<p>Graphs</p>
								</a>
							</li>
							<li>
								<a href="graphs.html">
									<i class="fa fa-bank text-danger"></i>
									<p>Home</p>
								</a>
							</li>
							<li>
								<a href="invoice.html">
									<i class="fa fa-file-text text-success"></i>
									<p>Invoice</p>
								</a>
							</li>
						</ul>
					</li>
					<li class="list-box dropdown hidden-xs">
						<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-bell"></i>
						</a>
						<span class="info-label danger-bg animated rubberBand">4</span>
						<ul class="dropdown-menu bounceIn animated messages">
							<li class="plain">
								Messages
							</li>
							<li>
								<div class="user-pic">
									<img src="img/user4.jpg" alt="User">
								</div>
								<div class="details">
									<strong class="text-danger">Wilson</strong>
									<span>Uploaded 28 new files yesterday.</span>
								</div>
							</li>
							<li>
								<div class="user-pic">
									<img src="img/user1.jpg" alt="User">
								</div>
								<div class="details">
									<strong class="text-danger">Adams</strong>
									<span>Got 12 new messages.</span>
								</div>
							</li>
							<li>
								<div class="user-pic">
									<img src="img/user3.jpg" alt="User">
								</div>
								<div class="details">
									<strong class="text-info">Sam</strong>
									<span>Uploaded new project files today.</span>
								</div>
							</li>
							<li>
								<div class="user-pic">
									<img src="img/user5.jpg" alt="User">
								</div>
								<div class="details">
									<strong class="text-info">Jennifer</strong>
									<span>128 new purchases last 3 hours.</span>
								</div>
							</li>
						</ul>
					</li>
					<li class="list-box user-profile hidden-xs">
						<a href="login.html" class="user-avtar animated rubberBand">
							<img src="img/user4.jpg" alt="user avatar">
						</a>
					</li>
				</ul>
			</div>
			<!-- Mini right nav ends -->

		</header>
		<!-- Header ends -->

		<!-- Left sidebar starts -->
		<aside id="sidebar">

			<!-- Current User Starts -->
			<div class="current-user">
				<div class="user-avatar animated rubberBand">
					<img src="img/user4.jpg" alt="Current User">
					<span class="busy"></span>
				</div>
				<div class="user-name">Welcome Mr. Lu</div>
				<ul class="user-links">
					<li>
						<a href="profile.html">
							<i class="fa fa-user text-success"></i>
						</a>
					</li>
					<li>
						<a href="invoice.html">
							<i class="fa fa-file-pdf-o text-warning"></i>
						</a>
					</li>
					<li>
						<a href="components.html">
							<i class="fa fa-sliders text-info"></i>
						</a>
					</li>
					<li>
						<a href="login.html">
							<i class="fa fa-sign-out text-danger"></i>
						</a>
					</li>
				</ul>
			</div>
			<!-- Current User Ends -->

			<!-- Menu start -->
			<div id='menu'>
				<ul>
                    <li>
                        <a href='index.html'>
                            <i class="fa fa-desktop"></i>
                            <span>仪表盘</span>
                        </a>
                    </li>
                    <li>
                        <a href='team-members.html'>
                            <i class="fa fa-user"></i> 
                            <span>团员管理</span>
                        </a>
                    </li>
                    <li class="highlight">
                        <a href='new-group.html'>
                            <i class="fa fa-flask"></i> 
                            <span>新建团队</span>
                            <span class="current-page"></span>
                        </a>
                    </li>
                    <li>
                        <a href='groups.html'>
                            <i class="fa fa-calendar"></i> 
                            <span>团队管理</span>
                        </a>
                    </li>
                    <li>
                        <a href='work-members.html'>
                            <i class="fa fa-github-alt"></i> 
                            <span>员工管理</span>
                        </a>
                    </li>
                    <li>
                        <a href='packages.html'>
                            <i class="fa fa-globe"></i> 
                            <span>套餐管理</span>
                        </a>
                    </li>
                    <li>
                        <a href='routes.html'>
                            <i class="fa fa-arrows-h"></i> 
                            <span>路线管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://182.61.146.234:8069/web?#action=128&model=tour.route&view_type=list&menu_id=96" target="_Blank" style='text-decoration:none;'>
                            <i class="fa fa-pencil fa-fw"></i>
                            <span>报表助手</span>
                        </a>
                    </li>
                </ul>
			</div>
			<!-- Menu End -->

            <div class="modal fade" id="mapInput" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                ×
                            </button>
                            <h4 class="modal-title">
                                查询城市路线
                            </h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form">

                                <div class="form-group">
                                    <label class="col-sm-3 control-label">城市</label>
                                    <div class="col-sm-9" >
                                        <select class="form-control citys" name="city" id="map_city">
                                            <!-- 从后端取到数据 -->
                                            <!-- 如果不选，默认为武汉 -->
                                            <option value="4" id="defaultOption">请选择城市</option>
                                        </select>
                                    </div>
                                </div>
    
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                关闭
                            </button>
                            <button type="submit" data-dismiss="modal"  class="btn btn-primary" id="map_city_confirm">
                                提交
                            </button><span id="tip"> </span>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>

			<!-- Freebies Starts -->
			<div class="freebies">
				
				 <!--Sidebar Extras-->       
				<div class="sidebar-addons">
					<ul class="views">
						<li>
							<a href='city.html'>
								<i class="fa fa-circle-o text-success"></i>
								<div class="details">
									<p>城市信息</p>
								</div>
							</a>
							
							<!--<span class="label label-success">8</span>-->
						</li>
						<li>
							<a href='sights.html'>
								<i class="fa fa-circle-o text-info"></i>
								<div class="details">
									<p>景点信息</p>
								</div>
							</a>
							<!--<span class="label label-info">7</span>-->
						</li> 
						<li>
                            <a href='#' data-toggle="modal" data-target="#mapInput">
                                <i class="fa fa-circle-o text-danger"></i>
                                <div class="details">
                                    <p>地图信息</p>
                                </div>
                            </a>
							<!--<span class="label label-danger">4</span>-->
						</li>         
					</ul>
				</div>

			</div>-->
			<!-- Freebies Starts -->

		</aside>
		<!-- Left sidebar ends -->

		<!-- Dashboard Wrapper starts -->
		<div class="dashboard-wrapper">

			<!-- Top Bar starts -->
			<div class="top-bar">
				<div class="page-title">
					新建团队
				</div>
				<ul class="stats hidden-xs">
					<li>
						<div class="stats-block hidden-sm hidden-xs">
							<span id="downloads_graph"></span>
						</div>
						<div class="stats-details">
							<!--<h4>$<span id="today_income">580</span> <i class="fa fa-chevron-up up"></i></h4>
							<h5>Today's Income</h5>-->
						</div>
					</li>
					<li>
						<div class="stats-block hidden-sm hidden-xs">
							<span id="users_online_graph"></span>
						</div>
						<div class="stats-details">
							<!--<h4>$<span id="today_expenses">235</span> <i class="fa fa-chevron-down down"></i></h4>
							<h5>Today's Expenses</h5>-->
						</div>
					</li>
				</ul>
			</div>
			<!-- Top Bar ends -->

			<!-- Main Container starts -->
			<div class="main-container">

				<!-- Container fluid Starts -->
				<div class="container-fluid">

					<!-- Spacer starts -->
					<div class="spacer">
						
						<!-- Row Starts -->
						<div class="row">
							<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
								<div class="blog">
									<div class="blog-header">
										<h5 class="blog-title">新增团队</h5>
									</div>
									<div class="blog-body">
										<form id='movieForm'>
											<div class="form-group">
												<div class="row">
													<div class="col-md-8">
														<label class="control-label">团队名称</label>
														<input type="text" class="form-control" name="title" id="group_name"/>
													</div>
													<div class="col-md-4 selectContainer">
														<label class="control-label">负责人</label>
														<select class="form-control" name="genre" id="charge">
															<!-- 从后端获取数据 -->
														</select>
													</div>
												</div>
											</div>
											<div class="form-group">
												<div class="row city-box">
													<div class="col-md-4">
														<label class="control-label">出发时间</label>
														<input type="date" class="form-control" name="director" id="start_date"/>
													</div>
													<div class="col-md-4">
														<label class="control-label">出发地点</label>
														<input type="text" class="form-control" name="writer" id="start_place"/>
													</div>
													<div class="col-md-4">
														<label class="control-label">目的城市</label>
														<input type="text" class="form-control" name="city" id="input_city" autocomplete="off" placeholder="<请选择目的城市>"/>
														<select class="form-control" name="" id="citys">
															<!-- 从后端取到数据 -->
														</select>
														<select class="form-control" name="" id="selected_citys"></select>
													</div>
												</div>
											</div>
											<div class="form-group">
												<div class="row">
													<div class="col-md-6">
														<label class="control-label">选择旅行套餐</label>
														<select class="form-control" name="route" id="package">
															<option value="" disabled selected>请先选择城市</option>
															<!-- 从后端取到的数据 -->
														</select>
													</div>
													<div class="col-md-6">
														<label class="control-label"></label><br><br>
														<!--<hr />-->
														<!--<input type="text" class="form-control" name="trailer" />-->
														<a href="javascript:void(0);" style="color: blue;" class="checkCity">浏览当前城市推荐套餐路线图</a>
													</div>
												</div>
											</div>
											<div class="form-group">
												<label class="control-label">团队人员</label>
												<a href="#" style="position: absolute; right: 20px; color: blue; text-decoration:none;" οnclick="aa(),return false" data-toggle="modal" data-target="#addUserModal" id="addUser">添加</a>
												<div class="blog-body">
													<table class="table table-striped no-margin">
								                      <thead>
								                        <tr>
								                          <th>索引</th>
								                          <th>人员ID</th>
								                          <th>姓名</th>
								                          <th>性别</th>
								                          <th>年龄</th>
								                          <th>手机号</th>
								                          <th>操作</th>
								                        </tr>
								                      </thead>
								                      <tbody id="selected_people_table">
								                        <!-- JS实现添加人员代码 -->
								                      </tbody>
								                    </table>
												</div>
											</div>
											<button type="button" class="btn btn-default" id="sive">保存</button>
										</form>
									</div>
								</div>
							</div>
						</div>
						<!-- Row Ends -->
					</div>
					<!-- Spacer ends -->

				</div>
				<!-- Container fluid ends -->

			</div>
			<!-- Main Container ends -->

			<!-- Right sidebar starts -->
			<div class="right-sidebar">
				
				<!-- Addons starts -->
				<div class="add-on clearfix">
					<div class="add-on-wrapper">
						<h5>Tasks</h5>
						<div class="todo">
							<fieldset class="todo-list">
								<label class="todo-list-item info">
									<input type="checkbox" class="todo-list-cb">
									<span class="todo-list-mark"></span>
									<span class="todo-list-desc">Attend seminar</span>
								</label>
								<label class="todo-list-item danger">
									<input type="checkbox" class="todo-list-cb">
									<span class="todo-list-mark"></span>
									<span class="todo-list-desc">UX workshop</span>
								</label>
								<label class="todo-list-item success">
									<input type="checkbox" class="todo-list-cb">
									<span class="todo-list-mark"></span>
									<span class="todo-list-desc">Pickup kids @4pm</span>
								</label>
								<label class="todo-list-item danger">
									<input type="checkbox" class="todo-list-cb">
									<span class="todo-list-mark"></span>
									<span class="todo-list-desc">Send wishes</span>
								</label>
								<label class="todo-list-item success">
									<input type="checkbox" class="todo-list-cb">
									<span class="todo-list-mark"></span>
									<span class="todo-list-desc">Redesign Application</span>
								</label>
								<label class="todo-list-item info">
									<input type="checkbox" class="todo-list-cb">
									<span class="todo-list-mark"></span>
									<span class="todo-list-desc">Send an email</span>
								</label>
							</fieldset>
						</div>
					</div>
				</div>
				<!-- Addons ends -->
			</div>
			<!-- Right sidebar ends -->

			<!-- Footer starts -->
			<footer>
				Copyright Everest Ruiyi 2019.
			</footer>
			<!-- Footer ends -->
			<!-- Footer ends -->

		</div>
	
		<!-- 添加弹出表单 -->
        <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                    </div>
                    <div class="row">

                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">Invoices</h4>
                                    </div>
                                    <div class="panel-body">
                                        <table id="example" class="cell-border display table" cellspacing="0" width="100%">
                                            <thead>
                                                <tr>
                                                    <th>索引</th>
                                                    <th>人员id</th>
                                                    <th>姓名</th>
                                                    <th>性别</th>
                                                    <th>年龄</th>
                                                    <!--<th>证件类型</th>-->
                                                    <!--<th>证件号</th>-->
                                                    <th>手机号</th>
                                                    <!--<th>邮箱</th>-->
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>

						</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                        <button type="submit" class="btn btn-primary" data-dismiss="modal" id="submit">
                            	选择
                        </button><span id="tip"> </span>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
		
		<!-- Dashboard Wrapper ends -->

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="js/jquery.js"></script>

		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/bootstrap.min.js"></script>

		<!-- Sparkline graphs -->
		<script src="js/sparkline.js"></script>

		<!-- jquery ScrollUp JS -->
		<script src="js/scrollup//jquery.scrollUp.js"></script>

		<!-- Notifications JS -->
		<script src="js/alertify/alertify.js"></script>
		<script src="js/alertify/alertify-custom.js"></script>

		<!-- BS Validator JS -->
		<script src="js/bsvalidator/bootstrapValidator.js"></script>
		
		<!-- 引入表格 -->
		<script src="js/jquery.dataTables.min.js"></script>
        <script src="js/tables.js"></script>

		<!-- Custom Index -->
		<script src="js/custom.js"></script>
		<script src="js/custom-forms.js"></script>
		
		<script src="js/jquery.datatables.js"></script>

		<!-- Custom Index -->
		<!--<script src="js/custom-datatables.js"></script>-->
		
		
		
		//选择城市
		<script>
			// 要保存的信息
			var worker = {};
			var city = {};
			var route_package = {};

			var input_city = document.getElementById('input_city');
			var citys = document.getElementById('citys');
			var selected_citys = document.getElementById('selected_citys');
			selected_citys.style.display = 'none';
			input_city.onfocus = function(e){
				citys.style.display = 'block';
			}
			citys.size = 5;
			selected_citys.size = 5;
			
			var body = document.getElementsByTagName('body')[0];
			body.onclick = function(event){
				event = event || window.event;		
				if(event.target.className == "checkCity"){
						var url = window.location.href;
						url = url.slice(0,-14);		
		        		url = url+'map.html?cityId='+city.id;
//						url = encodeURI(url);
						window.open(url, "", "");
					}
			}
			

            var cities = $('.citys');
                $.ajax({
                    url: webPath+"city/list",
                    type: "get",
                    success: function(res){
                        result = res.data;
                        for(var i=0; i<result.length; i++){
                            var option = document.createElement('option');
                            option.setAttribute("value",result[i].id);
                            option.innerText = result[i].name;
                            $('.citys').append(option);
                        }

                    },
                    error: function (xhr) {
                        alert(xhr.status);
                    }
                });

            $('#map_city_confirm').click(function(){
                var cityId = $('#map_city').val()
                window.location.href = './map.html?cityId=' + cityId;
            });

			//选中全部城市的内容框中的一个
			citys.onchange = function(e){
				var option = this.options[this.selectedIndex];
				// 从后端取得城市中的套餐
				city.id = option.getAttribute('value');
				var packages = document.getElementById("package");
				$.ajax({
	                   url: webPath+"tourgroup/selectpackage",
	                   type: "get",
	                   data: "id="+option.getAttribute("value"),
	                   success: function(data){
							result = data.data;
							packages.innerHTML = "";
							route_package.id = result[0].id;
	                        for(var i=0; i<result.length; i++){
								var option = document.createElement('option');
								option.setAttribute("value",result[i].id);
								option.innerText = result[i].name;
								packages.appendChild(option);
	                        }
	                       
	                       
	                   },
	                   error: function (xhr) {
	                       alert(xhr.status);
	                   }
	               });
				input_city.value = option.innerHTML;
				citys.style.display = 'none';
			}
			
			//在推荐的内容框中选中城市
			selected_citys.onchange = function(e){
				var option = this.options[this.selectedIndex];
				city.id = option.getAttribute('value');
				$.ajax({
	                   url: webPath+"tourgroup/selectpackage",
	                   type: "get",
	                   data: "id="+option.getAttribute("value"),
	                   success: function(data){
							result = data.data;
							packages.innerHTML = "";
							route_package.id = result[0].id;
	                        for(var i=0; i<result.length; i++){
								var option = document.createElement('option');
								option.setAttribute("value",result[i].id);
								option.innerText = result[i].name;
								packages.appendChild(option);
	                        }
	                       
	                       
	                   },
	                   error: function (xhr) {
	                       alert(xhr.status);
	                   }
	               });
				input_city.value = option.innerHTML;
				selected_citys.style.display = 'none';
			}
			
			var reg;
			input_city.oninput = function(){
				//每次匹配框都初始化
				selected_citys.innerHTML = "";
				//正则表达式匹配相关城市
				reg = new RegExp(input_city.value);
				for(var i=0; i<citys.children.length; i++){
					if(reg.test(citys.children[i].innerText)){
						var city = document.createElement("option");
						city.innerText = citys.children[i].innerText;
						city.setAttribute('value',citys.children[i].getAttribute('value'));
						selected_citys.appendChild(city);
					}
				}
				//隐藏全部城市列表
				citys.style.display = 'none';
				//显示匹配城市列表
				selected_citys.style.display = 'block';
				//输入框中没有值时，显示全部城市列表，隐藏匹配的列表
				if(input_city.value == ""){
					selected_citys.style.display = 'none';
					citys.style.display = 'block';
					
				}
			}
			
			document.addEventListener("click", function(e){
     		// 判断被点击的元素是不是citys元素，不是的话，就隐藏之
			    if( e.target !== citys && e.target !== selected_citys && e.target!== input_city ){
			           	citys.style.display = 'none';
						selected_citys.style.display = 'none';
			    }
			});

			// 团队人员信息列表
			var tbody_selected = document.getElementById("selected_people_table");
			// 弹出框中的选择按钮
			var submit = document.getElementById('submit');
			// 保存信息
			var sive = document.getElementById('sive');

			// 选择工作人员
			var charge = document.getElementById('charge')
			charge.onchange = function(event){
				var option = this.options[this.selectedIndex];
				worker.id = option.getAttribute('value');
			}
			
			// 选择套餐
			var packages = document.getElementById('package');
			packages.onchange = function(event){
				var option = this.options[this.selectedIndex];
				route_package.id = option.getAttribute('value');
			}

			//添加选择人员
			submit.onclick = function(event){
				var example = document.getElementById("example");
				var person = example.children[1];
				
				for(var i=0; i<person.children.length; i++){
					child = person.children[i];
					if(child.classList.contains("selected")){
						//将选择的人员添加到团队人员中
						var tr = document.createElement('tr');
						// str为tr的内容
						var str = "<td>"+(tbody_selected.children.length+1)+"</td><td>"+child.children[1].innerText+"</td><td>"+child.children[2].innerText+"</td><td>"+child.children[3].innerText+"</td><td>"+child.children[4].innerText+"</td><td>"+child.children[5].innerText+"</td><td><a href='#' style='text-decoration:none;' οnclick='aa(),return false;'><strong style='color: red; font-size: 18px;'>×</strong></a></td>";
				        tr.innerHTML = str;
				        tbody_selected.appendChild(tr);
				        child.classList.remove('selected');
				        child.classList.add('hide');
					}
					
				}
			}
			//删除选择人员
			tbody_selected.onclick = function(event){
				event = event || window.event;		
				if(event.target.tagName == 'STRONG'){
					var deleteflag = confirm("确定删除吗？");
					if(deleteflag == true){
						var tr = event.target.parentElement.parentElement.parentElement;
						var id = tr.children[1].innerText;
						var example = document.getElementById("example");
						var person = example.children[1];
						for(var i=0; i<person.children.length; i++){
							child = person.children[i];
							if(child.children[1].innerText == id){
								child.classList.remove('hide');
							}
						}
						this.removeChild(tr);
					}
					
					return false;
				}
			}
			
			// 提交保存信息
			sive.onclick = function(event){
				var groupName = document.getElementById('group_name');
				var startDate = document.getElementById('start_date');
				var startPlace = document.getElementById('start_place');
				var group = {};
				group.id = null;
				group.name = groupName.value;
				group.start_date = startDate.value + " 00:00:00";
				group.start_place = startPlace.value;
				group.city = city;
				group.worker = worker;
				group.route_package = route_package;
				var members = [];
				for(var i=0; i<tbody_selected.children.length; i++){
					var member = {};
					member.id = tbody_selected.children[i].children[1].innerText;
					members.push(member);
				}
				group.members = members;
				group.member_num = tbody_selected.children.length;
				if(group.name=="" || group.start_date==" 00:00:00" || group.start_place=="" || group.worker.id==undefined || group.city.id==undefined || group.route_package.id==undefined || group.member_num==0){
					alert("请填写完整的团队信息");
				}else{
					$.ajax({
	                   url: webPath + "tourgroup/create",
	                   type: "post",
	                   headers: { 
	                        'Content-Type': 'application/json; charset=utf-8'  //multipart/form-data;boundary=--xxxxxxx   application/json
	                   },
	               		data: JSON.stringify(group),
	                   success: function(result){
		                   	if(result.code == 0){
		                   		alert("保存成功");
	                       		sive.disabled=true;
		                   	}	                    
	                   },
	                   error: function (xhr) {
	                       alert(xhr.status);
	                   }
               		});
				}
			}
			
			
			
		</script>
		
		<script>
		$(function() {
                // 模拟数据
                var data = [
                        {
                            id: 1, name: "陆麟趾", sex: 6, age: 22, type_card: 2, number_card: "1703", telephone: "1111", email: "louis@qq.com" 
                        },
                    ]
                // 表格初始化
                var config = {
                    "ajax": {
                        url: webPath + 'tourgroupmember/list',
                        dataSrc: 'data',
                        type: 'GET'
                    },
                    "columns":[
                        {
                            "data": null,
                            "width": "40px"
                        },{
                            "data": "id",
                        },{
                            "data": "myname"
                        },{
                            "data": "gender",
                            "render": function(data, type, row, meta) {
                                if (data != 1 && data != 0) {
                                    return "男"
                                }
                                return data == 1? "男":"女";
                            }
                        }, {
                            "data": "age"
                        }, {
                            "data": "telephone"
                        }
                    ]
                };
                var table = init_table(config);
                set_align(0, 'center')
                set_align(1, 'center')
            })

   
		</script>-->
		
		<!-- 初始化页面ajax请求 -->
		<script>
			var cities = document.getElementById("citys");
			$.ajax({
                   url: webPath+"city/list",
                   type: "get",
                   data: "",
                   success: function(data){
//                     alert(result[0].name);
						result = data.data;
						cities.innerHTML = "";
                        for(var i=0; i<result.length; i++){
							var option = document.createElement('option');
							option.setAttribute("value",result[i].id);
							option.innerText = result[i].name;
							cities.appendChild(option);
                        }
                       
                       
                   },
                   error: function (xhr) {
                       alert(xhr.status);
                   }
               });
            var workers = document.getElementById("charge");
			$.ajax({
                   url: webPath+"tourgroup/selectworker",
                   type: "get",
                   data: "",
                   success: function(data){
						result = data.data;
						workers.innerHTML = "";
						var tip_option = document.createElement('option');
						tip_option.innerText = "请选择负责人";
						tip_option.setAttribute('disabled','disabled');
						tip_option.setAttribute('selected','selected');
						workers.appendChild(tip_option);
                        for(var i=0; i<result.length; i++){
							var option = document.createElement('option');
							option.setAttribute("value",result[i].id);
							option.innerText = result[i].name;
							workers.appendChild(option);
                        }
                       
                       
                   },
                   error: function (xhr) {
                       alert(xhr.status);
                   }
               });
		</script>
		
		
		
	</body>
</html>